<template>
  <el-dialog
    v-model="showDialog"
    title="上传资源"
    left
    :append-to-body="true"
    class="drag-dialog small-padding-dialog"
    width="60%"
    :before-close="closeDialog"
    :close-on-click-modal="false"
    destroy-on-close
    align-center
  >
    <el-upload
      ref="upload"
      class="upload-demo"
      :http-request="saveImageUpload"
      list-type="picture"
      multiple="true"
      :show-file-list="false"
      :accept="format"
      :before-upload="beforeAvatarUpload"
    >
      <el-button type="primary">点击上传</el-button>
      <div class="el-upload__tip">&nbsp;支持格式：{{ format }}，文件大小不超过{{ FileSize }}M</div>
    </el-upload>
    <div style="margin-top: 10px">
      <el-card v-for="(item, index) in fileList" :key="index" class="box-card">
        <div class="text-item">
          <svg-icon class="icon-card" icon-class="el-remove" @click="removeImage(index)" /><i
            class="el-icon-remove avatar-uploader-icon"
          ></i>
          <div class="demo-image__error">
            <div class="block">
              <el-form label-width="80px" label-position="right">
                <el-form-item label="名称" required>
                  <el-input v-model="item.name" />
                </el-form-item>
                <el-form-item label="关键字">
                  <el-input v-model="item.keywords" />
                </el-form-item>
                <el-form-item label="分类">
                  <el-input v-model="item.classifications" />
                </el-form-item>
                <el-form-item label="标签">
                  <el-input v-model="item.labels" />
                </el-form-item>
              </el-form>
            </div>
            <div class="block">
              <img v-if="item.ext == 'xml'" :src="xmls" />
              <img v-else-if="item.ext == 'pdf'" :src="pdfs" />
              <img v-else-if="item.ext == 'html'" :src="htmls" />
              <img v-else-if="item.ext == 'epub'" :src="epubs" />
              <img v-else-if="item.ext == 'mobi'" :src="mobis" />
              <img v-else :src="files" />
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="saveFile">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { FileFormat, FileSize } from '@/utils/config'
import * as resourceApi from '@/api/resource'
import { UploadProps } from 'element-plus'
import xml from '@/assets/imgs/xml.svg'
import pdf from '@/assets/imgs/pdf.svg'
import html from '@/assets/imgs/html.svg'
import epub from '@/assets/imgs/epub.svg'
import mobi from '@/assets/imgs/mobi.svg'
import file from '@/assets/imgs/file.svg'
import * as metaApi from '@/api/meta'

const showDialog = ref(false)
const fileList = ref([])
const xmls = ref(xml)
const pdfs = ref(pdf)
const htmls = ref(html)
const epubs = ref(epub)
const mobis = ref(mobi)
const files = ref(file)
const resourceId = ref(0)
const fieldType = ref(0)

const openDialog = (id, type) => {
  getFormat()
  showDialog.value = true
  resourceId.value = id
  fieldType.value = type
  console.log(id + '=' + type)
}
const closeDialog = () => {
  showDialog.value = false
  fileList.value = []
  format.value = FileFormat
}

const saveImageUpload = async (content) => {
  let form = new FormData()
  form.append('file', content.file)
  const data = await resourceApi.uploadFile(form)
  fileList.value.push(data.data)
}

//上传前验证文件大小
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  let size = Number(FileSize)
  if (rawFile.size / 1024 / 1024 > Number(FileSize)) {
    ElMessage.error('file size can not exceed ' + size + 'MB!')
    return false
  }
  return true
}
const saveFile = async () => {
  await metaApi.addResource(props.dataId, props.fieldId, fileList.value)
  closeDialog()
  getList()
}

const getList: any = inject('getList')

const props = defineProps({
  dataId: String,
  fieldId: String
})
const format = ref(FileFormat)
const getFormat = async () => {
  let res = await metaApi.selectFieldOne(props.fieldId)
  if (res.fileFormat) {
    format.value = res.fileFormat
  }
}
defineExpose({
  openDialog
})
</script>
<style lang="scss" scoped>
.body {
  margin: 0;
}

.box-card {
  position: relative;
  padding: 0.05rem 2%;
  margin-top: 5px;
  border: 1px solid #e0e0e0;
}

.text-item {
  overflow: hidden;
}

.box-card .icon-card {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  line-height: 0.2rem;
  cursor: pointer;
}

.demo-image__error .block {
  display: inline-block;
  width: 49%;
  text-align: center;
  vertical-align: top;
  box-sizing: border-box;
}

.demo-image__error .demonstration {
  display: block;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
  max-width: 300px;
  max-height: 200px;
  padding: 0 5px;
}

.demo-image__error .image-slot {
  display: flex;
  width: 100%;
  height: 100%;
  font-size: 30px;
  color: var(--el-text-color-secondary);
  background: var(--el-fill-color-light);
  justify-content: center;
  align-items: center;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.image-list .block {
  display: inline-block;
  width: 100px;
  margin-right: 5px;
  text-align: center;
  vertical-align: top;
  box-sizing: border-box;
}

.image-list .block:last-child {
  border-right: none;
}

.image-list .demonstration {
  display: block;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}
</style>
